<template>
    <div v-if="data">
        <div class="back" @click="goBack">
            <van-icon color="#fff" size="14" name="arrow-left"/>
        </div>
        <van-swipe @change="onChange">
            <van-swipe-item v-for="(swipe,swIdx) in data.info.gallery" :key="swIdx">
                <img :src="swipe">
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/{{ data.info.gallery.length }}</div>
            </template>
        </van-swipe>
        <div class="title">
      <span>
        <span>￥</span>
        <span>{{ data.info.retailPrice }}</span>
      </span>
            <div @click="like">
                <van-icon v-show="!mylike" name="like-o" size="20" color="#101010"/>
                <van-icon v-show="mylike" name="like" size="20" color="#FF0000"/>
                <span>收藏</span>
            </div>
        </div>
        <div class="desc">
            {{ data.info.name }}
        </div>
        <!--  选择参数  -->
        <div class="choose">
            <span>选择</span>
            <span>请选择商品规格</span>
            <van-icon name="ellipsis"/>
        </div>
        <!--  配送地址  -->
        <div class="address">
            <span>送至</span>
            <span v-if="!address">暂无配送地址</span>
            <span v-else>
              <template v-for="add in address">
                <span class="addtxt" v-if="add.isDefault">{{add.province + add.city + add.county + add.addressDetail}}</span>
              </template>
            </span>
            <van-icon name="ellipsis"/>
        </div>
        <!--  评价  -->
        <div class="evaluate">
            <span>
             <span>评价</span>
             <span>{{ data.comment.count }} 条</span>
            </span>
            <van-icon name="arrow"/>
        </div>
        <div class="jkl" v-if="data.comment.count == 0">暂无评论</div>
        <div class="evaluate-box" v-for="(eva, evaIdx) in data.comment.data" :key="evaIdx">
            <div class="user">
                <div class="avatar">
                    <img :src="eva.avatar">
                    <!--          <van-icon name="contact" color="#101010" size="19"/>-->
                </div>
                <div class="level">
                    <!--          <div class="nickName">被点燃的萤火虫</div>-->
                    <div class="nickName">{{ eva.nickname }}</div>
                    <div>
                        <van-rate size="13" v-model="value"/>
                    </div>
                </div>
            </div>
            <div class="count">
                <div class="txt">
                    {{ eva.content }}
                </div>
                <div class="img">
                    <van-image
                            v-for="evaImg in eva.picList"
                            width="100"
                            height="100"
                            :src="evaImg"
                    />
                </div>
            </div>
        </div>
        <!--  店铺  -->
        <div class="store">
            <div class="header">
                <van-image v-if="data.brand.picUrl" width="112" height="45" :src="data.brand.picUrl"/>
                <van-image v-else width="112" height="45" :src="require('../../../public/img/avatar.jpg')"/>
                <div class="name" v-if="data.brand.name">{{ data.brand.name }}</div>
                <div class="name" v-else>胖猫官方旗舰店</div>
                <van-icon name="arrow" size="16"/>
            </div>
            <div class="img">
                <van-image v-if="data.brand.picUrl" width="348" height="138" :src="data.brand.picUrl"/>
                <van-image v-else width="348" height="138" :src="require('../../../public/img/avatar.jpg')"/>
            </div>
            <div class="btn">
                <van-button plain round type="danger">进店逛逛</van-button>
            </div>
        </div>
        <!--  商品介绍  -->
        <div class="goodsMsg" v-html="data.info.detail"></div>
        <div class="goods-particular" v-if="data.info.detail == ''">
            <van-image v-for="(particular,PartIdx) in data.info.gallery" :key="PartIdx"
                       width="375" height="368"
                       :src="particular"/>
        </div>
        <!--  常见问题  -->
        <div class="issue">
            <div class="title">常见问题</div>
            <div class="count" v-for="issue in data.issue" :key="issue.id">
                <div class="tips">
                    {{ issue.question }}
                </div>
                <div>
                    {{ issue.answer }}
                </div>
            </div>
        </div>
        <!--  大家都在看  -->
        <div class="everybody">
            <div class="title">大家都在看</div>
            <van-grid :column-num="2">
                <van-grid-item v-for="everybody in data.relatedGoods" :key="everybody.id">
                    <van-image :src="everybody.picUrl"/>
                    <div>
                        <div class="desc">{{ everybody.name }}</div>
                        <div class="price">￥{{ everybody.retailPrice }}</div>
                    </div>
                </van-grid-item>
            </van-grid>
        </div>
        <!--  底部购买  -->
        <van-goods-action>
            <!--      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />-->
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon"/>
            <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon"/>
            <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton"/>
            <van-goods-action-button type="danger" text="立即购买" @click="onClickButton"/>
        </van-goods-action>

        <!--  商品规格  -->
        <!--    <van-sku-->
        <!--        v-model="show"-->
        <!--        :sku="sku"-->
        <!--        :goods="goods"-->
        <!--        :goods-id="goodsId"-->
        <!--        :quota="quota"-->
        <!--        :quota-used="quotaUsed"-->
        <!--        :hide-stock="sku.hide_stock"-->
        <!--        :message-config="messageConfig"-->
        <!--        @buy-clicked="onBuyClicked"-->
        <!--        @add-cart="onAddCartClicked"-->
        <!--    />-->


        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :hide-stock="sku.hide_stock"
                @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"
        />


        <!--    <van-action-sheet v-model="show" class="sku">-->
        <!--      <div class="title">-->
        <!--        <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>-->
        <!--        <div class="txt">-->
        <!--          <span class="tips">价格：<span>￥999</span></span>-->
        <!--          <span>1.5m床垫*1+枕头*2  玫瑰红</span>-->
        <!--        </div>-->
        <!--        <van-icon name="cross" />-->
        <!--      </div>-->
        <!--      <div class="content">-->
        <!--        <div class="item">-->
        <!--          <span>规格</span>-->
        <!--          <div class="check">1.5m床垫*1+枕头*2</div>-->
        <!--        </div>-->
        <!--      </div>-->
        <!--    </van-action-sheet>-->
    </div>
</template>

<script>
    export default {
        name: "GoodsMsg",
        data() {
            return {
                current: 0,
                value: 5,
                show: false,
                data: null,
                active: 0,
                mylike: false,
                myCollect: this.$store.state.collect ? this.$store.state.collect : null,
                address: this.$store.state.address ? this.$store.state.address : null,


                sku: {
                    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                    tree: [
                        {
                            k: '颜色',
                            k_id: '1',
                            v: [
                                {
                                    id: '30349',
                                    name: '天蓝色',
                                    imgUrl:
                                        'https://img.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'
                                },
                                // {
                                //   id: '1215',
                                //   name: '白色'
                                // }
                            ],
                            k_s: 's1',
                            // count: 2
                        },
                        // {
                        //   k: '尺寸',
                        //   k_id: '2',
                        //   v: [
                        //     {
                        //       id: '1193',
                        //       name: '大'
                        //     },
                        //     {
                        //       id: '1194',
                        //       name: '小'
                        //     }
                        //   ],
                        //   k_s: 's2',
                        //   count: 2
                        // }
                    ],
                    // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
                    list: [
                        // {
                        //   id: 2259,
                        //   price: 300, //价格
                        //   discount: 122,
                        //   s1: '1215',
                        //   s2: '1193',
                        //   stock_num: 20, //库存
                        //   goods_id: 946755
                        // },
                        // {
                        //   id: 2260,
                        //   price: 110,
                        //   discount: 112,
                        //   s1: '1215',
                        //   s2: '1194',
                        //   stock_num: 2, //库存
                        //   goods_id: 946755
                        // },
                        {
                            id: 2257,
                            price: 13000,
                            discount: 132,
                            s1: '30349',
                            // s2: '1193',
                            stock_num: 400, //库存
                            goods_id: 946755
                        },
                        // {
                        //   id: 2258,
                        //   price: 100,
                        //   discount: 100,
                        //   s1: '30349',
                        //   s2: '1194',
                        //   stock_num: 50, //库存
                        //   goods_id: 946755
                        // }
                    ],
                    price: '5.00',
                    stock_num: 227, // 商品总库存
                    none_sku: false,  // 是否无规格商品
                    hide_stock: false  // 是否隐藏剩余库存
                },
                goods: {
                    // 默认商品 sku 缩略图
                    picture: 'https://img.yzcdn.cn/upload_files/2017/03/16/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2/2/w/100/h/100/q/75/format/jpg'
                },


            }
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            onClickIcon() {

            },
            onClickButton() {
                this.show = true
                const newSku = {}
                newSku.tree = []
                newSku.list = []


                for (let i = 0; i < this.data.specificationList.length; i++) {
                    let vList = []
                    // console.log(specificationList[i])

                    for (let j = 0; j < this.data.specificationList[i].valueList.length; j++) {
                        // console.log(this.data.specificationList[i].valueList[j].id)
                        if (this.data.specificationList[i].name == this.data.specificationList[i].valueList[j].specification) {
                            const obj = {
                                name: this.data.specificationList[i].valueList[j].value,
                                id: this.data.specificationList[i].valueList[j].id
                            }
                            vList.push(obj)
                        }
                    }

                    const obj = {
                        k: this.data.specificationList[i].name,
                        k_id: i + 1,
                        v: vList,
                        k_s: 's' + (i + 1)
                    }
                    newSku.tree.push(obj)
                }

                let num = []
                for (let i = 0; i < newSku.tree.length; i++) {
                    for (let j = 0; j < newSku.tree[i].v.length; j++) {
                        num.push(newSku.tree[i].v[j].id)
                    }
                }
                // console.log(newSku)
                let max = 0
                newSku.tree.forEach(value => {
                    if (value.v.length > max) {
                        max = value.v.length
                    }
                })
                if (newSku.tree.length == 1) {
                    for (let i = 0; i < newSku.tree.length; i++) {
                        // console.log(this.data.productList[i].id)
                        const obj = {
                            // id: newSku.tree[i].v[j].id,
                            id: newSku.tree[i].v[i].id,
                            price: this.data.productList[i].price * 100, //价格
                            discount: 122,
                            s1: '' + newSku.tree[i].v[i].id,
                            stock_num: this.data.productList[i].number, //库存
                            goods_id: 1181000,
                            productId: this.data.productList[i].id
                        }
                        newSku.list.push(obj)
                        // console.log(i)
                    }
                } else {
                    let n = 0
                    for (let i = 0; i < newSku.tree.length; i++) {
                        for (let j = 0; j < max; j++) {
                            // console.log(this.data.productList[n])
                            const obj = {
                                // id: newSku.tree[i].v[j].id,
                                price: this.data.productList[i].price * 100, //价格
                                discount: 122,
                                s1: '' + (i + 1),
                                s2: '' + num[newSku.tree.length + j],
                                stock_num: this.data.productList[i].number, //库存
                                goods_id: this.data.productList[i].goodsId,
                                productId: this.data.productList[n].id
                            }
                            n++
                            newSku.list.push(obj)
                        }
                    }
                }
                // console.log(newSku.tree[0].v[0].id)

                // console.log(max)
                newSku.price = this.data.info.counterPrice + '.00'
                // newSku.stock_num = 777
                // newSku.none_sku = false
                // newSku.hide_stock = false
                this.sku = newSku
                // console.log(this.sku)

            },
            async onBuyClicked(skuData) {
                // console.log('去往订单页面')
                console.log(skuData)
                let code = 0  // 声明一个变量用来存放购物车id
                // 点击立即购买商品缓存购买信息
                await this.$post('cart/fastadd', {
                  goodsId: this.data.info.id,
                  number: skuData.selectedNum,
                  productId: skuData.selectedSkuComb.productId
                })
                  .then(res => {
                    // 把返回的购物车id赋值给code变量
                    code = res.data.data
                    console.log(res)
                  })
                // 去往订单页面
                this.$router.push({name: 'suborder',
                  query: {
                    cartId: code, // 从接口返回的购物车id
                    selectedNum: skuData.selectedNum,// 购买的数量
                    picUrl: this.data.info.picUrl, // 商品图片
                  }
                })




              // await this.$post('cart/checkout',{
              //   cartId: 620,
              //   addressId: 72,
              //   couponId: 0, // 传0
              //   userCouponId: 0, // 传0
              // })
              //   .then(res => {
              //     console.log(res)
              //   })
            },
            async onAddCartClicked(skuData) {
                // 添加至购物车
                console.log('添加到购物车')
                console.log(skuData)
                const post = await this.$post('cart/add',{
                   // goodsId: skuData.selectedSkuComb.goods_id,
                    goodsId: this.data.info.id,
                    number: skuData.selectedNum,
                    productId: skuData.selectedSkuComb.productId
                })
                console.log(post.data)

            },
            goBack() {
                this.$router.go(-1)
            },
            async like() {
                if (!this.mylike) {
                    // 收藏
                    this.mylike = !this.mylike
                } else {
                    // console.log('取消收藏')
                    this.mylike = !this.mylike
                }
                // 添加或者删除收藏
                const get1 = await this.$post('collect/addordelete', {
                    type: 0,
                    valueId: this.data.info.id
                })
                // 每次添加或删除都做一次重新获取收藏列表
                this.Collect()
            },
            async Collect() {
                // 获取收藏列表
                const get1 = await this.$get('collect/list', {type: 0})
                // console.log(get1.data.data.list)
                localStorage.setItem('collect', JSON.stringify(get1.data.data.list))
                this.$store.commit('addCollect', get1.data.data.list)
            }
        },
        async created() {
            const get1 = await this.$get2('goods/detail', 'id', this.$route.query.id)
            console.log(get1.data.data)
            this.data = get1.data.data
            this.goods.picture = get1.data.data.info.picUrl

            //  遍历查看当前商品是否存在vuex收藏列表中如果存在就激活收藏图标
            const arr = this.myCollect
            arr.some(value => {
                if (value.valueId === get1.data.data.info.id) {
                    return this.mylike = true
                }
            })


        }
    }
</script>

<style lang="less" scoped>
  .back {
    position: fixed;
    top: 6px;
    margin-left: 14px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #909090;
    text-align: center;
    z-index: 99;
  }

  .van-swipe-item {
    width: 375px;
    height: 356px;
    background-color: skyblue;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .custom-indicator {
    padding-left: 14px;
    position: absolute;
    right: 0px;
    bottom: 44px;
    width: 43px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: rgba(0, 0, 0, 0.1);
  }

  .title {
    margin-top: 13px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 31px;

    > span {
      margin-left: 12px;
      color: #E51C23;

      :first-child {
        font-size: 12px;
      }

      :last-child {
        font-size: 22px;
      }
    }

    > div {
      margin-right: 27px;
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 12px;
      color: #101010;
    }
  }

  .desc {
    text-indent: 2em;
    margin-left: 8px;
    font-size: 13px;
    font-weight: bold;
  }

  .choose {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 40px;
    font-size: 14px;
    line-height: 19px;

    :nth-child(1) {
      margin-left: 15px;
      font-weight: bold;
    }

    :nth-child(2) {
      width: 241px;
      font-size: 13px;
      color: #101010;
    }

    :nth-child(3) {
      margin-top: 2px;
      margin-right: 13px;
    }
  }

  .address {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 38px;
    font-size: 14px;
    line-height: 19px;

    :nth-child(1) {
      margin-left: 15px;
      font-weight: bold;
    }

    :nth-child(2) {
      width: 241px;
      font-size: 13px;
      color: #101010;
    }

    :nth-child(3) {
      margin-top: 2px;
      margin-right: 13px;
    }
    .addtxt {
      margin-left: 0px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
      display: block;
      width: 241px;
      font-size: 13px;
      color: #101010;
      font-weight: normal;
    }
  }

  .evaluate {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 38px;
    line-height: 19px;

    > span {
      margin-left: 15px;

      :first-child {
        margin-right: 11px;
        font-weight: bold;
      }

      :last-child {
        font-size: 12px;
        color: #101010;
      }
    }

    .van-icon-arrow {
      margin-top: 2px;
      margin-right: 13px;
    }
  }

  .evaluate-box {
    margin-top: 40px;

    .user {
      margin-left: 24px;
      display: flex;
      flex-direction: row;

      .avatar {
        margin-right: 5px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        line-height: 45px;
        background-color: skyblue;
        text-align: center;

        > img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .level {
        margin-top: 5px;
        font-size: 13px;
      }
    }

    .count {
      margin-top: 18px;
      margin-bottom: 40px;

      .txt {
        margin: 0 12px;
        font-size: 13px;
        color: #101010;
      }

      .img {
        margin-top: 18px;
        margin-left: 12px;

        .van-image {
          margin-right: 8px;
        }
      }
    }

  }

  .jkl {
    margin: 50px 0;
    width: 375px;
    text-align: center;
    font-size: 18px;
    color: gray;
  }

  // 店铺
  .store {
    position: relative;
    margin-left: 14px;
    font-size: 14px;
    color: #4D4A4A;

    .header {
      display: flex;
      flex-direction: row;

      .name {
        margin-left: 13px;
        font-weight: bold;
      }

      .van-icon-arrow {
        position: absolute;
        margin-right: 13px;
        right: 0px;
      }
    }

    .img {
      margin-top: 14px;
    }

    .btn {
      margin-top: 14px;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .van-button {
        width: 141px;
        height: 40px;
      }
    }
  }

  // 商品介绍
  .goods-particular {
    margin-top: 14px;


    //margin-bottom: 60px;
  }

  // 常见问题
  .issue {
    width: 375px;
    margin-bottom: 60px;

    .title {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 14px;
    }

    .title::before, .title::after {
      position: absolute;
      width: 60px;
      height: 1px;
      background-color: #BBBBBB;
      content: "";
    }

    .title::after {
      top: 13px;
      right: 90px;
    }

    .title::before {
      top: 13px;
      left: 90px;
    }

    .count {
      margin: 0 14px;
      font-size: 14px;

      .tips {
        margin-bottom: 5px;
        font-size: 15px;
        font-weight: bold;
      }

      :last-child {
        margin-bottom: 10px;
        color: #929292;
      }
    }
  }

  //  大家都在看
  .everybody {
    .title {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 14px;
    }

    .title::before, .title::after {
      position: absolute;
      width: 60px;
      height: 1px;
      background-color: #BBBBBB;
      content: "";
    }

    .title::after {
      top: 13px;
      right: 80px;
    }

    .title::before {
      top: 13px;
      left: 80px;
    }

    .van-grid {
      margin-bottom: 60px;
    }

    .desc {
      width: 163px;
      word-break: keep-all; /* 不换行 */
      white-space: nowrap; /* 不换行 */
      overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
      text-overflow: ellipsis;
      text-indent: 0;
      font-size: 14px;
    }

    .price {
      margin-top: 6px;
      font-size: 13px;
      color: red;
      text-align: center;
    }
  }

  .sku {
    height: 400px;

    .title {
      margin-left: 20px;

      .txt {
        margin-left: -40px;
        margin-top: 20px;
        text-align: left;

        .tips {
          font-size: 18px;
        }
      }

      .van-icon-cross {
        margin-right: 20px;
      }
    }

    .content {
      margin-left: 20px;
      margin-top: 20px;

      .item {
        font-size: 14px;

        .check {
          margin-top: 14px;
        }
      }
    }
  }


</style>

<!--全局样式-->
<style lang="less">
  .goodsMsg {
    margin-top: 30px;
    width: 375px;

    p {
      margin: 0;
      padding: 0;
      line-height: 0px;
      width: 375px;

      img {
        width: 375px;
      }
    }
  }
</style>
